import React, {Component} from 'react'
import '../../less/index.less'
import {withRouter} from 'react-router-dom'
import {Icon, Modal, Tag, Checkbox, Row, Col} from 'antd'
import * as assignmentQuizTagAction from '../../actions/assignment-quiz-tag'

import {connect} from 'react-redux'
import {FormattedMessage} from 'react-intl'

class AssignmentTagBox extends Component {
  constructor (props) {
    super(props)
    this.state = {
      modalVisible: false
    }
  }

  componentWillMount () {
    const {programId} = this.props
    this.props.getAssignmentQuizTagsByProgramId(programId)
  }

  handleChange (tagIds) {
    const {assignmentId, quizId, studentId} = this.props
    this.props.editStudentAssignmentQuizTags(assignmentId, quizId, studentId, tagIds)
  }
  render () {
    const {assignmentQuizTag} = this.props
    const assignmentQuizTags = assignmentQuizTag.tags || []
    const studentTags = assignmentQuizTag.studentTags || []
    const selectTagIds = studentTags.map(item => item.assignmentQuizTag.id)
    const {modalVisible} = this.state
    return (
      <div className='back-icon'>
        <Tag style={{ borderStyle: 'dashed' }}
          onClick={() => this.setState({modalVisible: true})}>
          <Icon type='plus' /> Add Tag
                </Tag>
        {studentTags.map((item, index) =>
          <Tag key={index} color={item.assignmentQuizTag.color === 'default' ? '' : item.assignmentQuizTag.color}>
            {item.assignmentQuizTag.name}
          </Tag>
                )}
        <Modal
          title={<FormattedMessage id='标签' />}
          centered
          footer={null}
          width={400}
          visible={modalVisible}
          onCancel={() => this.setState({modalVisible: false})}>
          <Checkbox.Group style={{ width: '100%' }} value={selectTagIds} onChange={this.handleChange.bind(this)}>
            <Row>
              {assignmentQuizTags.map((item, index) => <Col span={12} key={index} className='tag-margin'>
                <Checkbox value={item.id}><Tag key={index} color={item.color === 'default' ? '' : item.color}>{item.name}</Tag></Checkbox>
              </Col>
                            )}
            </Row>
          </Checkbox.Group>
        </Modal>
      </div>
    )
  }
}
const mapStateToProps = ({assignmentQuizTag}) => ({
  assignmentQuizTag
})
const mapDispatchToProps = dispatch => ({
  getAssignmentQuizTagsByProgramId: (programId) => dispatch(assignmentQuizTagAction.getAssignmentQuizTagsByProgramId(programId)),
  editStudentAssignmentQuizTags: (assignmentId, quizId, studentId, tagIds) => dispatch(assignmentQuizTagAction.editStudentAssignmentQuizTags(assignmentId, quizId, studentId, tagIds))
})

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(AssignmentTagBox))
